<template>
	<view class="detail container">
		<view class="banner">
			<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
					<swiper-item v-for="item in pictureList" :key="item">
							<image :src="item" mode="" class="banner-img"></image>
					</swiper-item>
			</swiper>
		</view>
		<view class="pro-base">
			<view class="name">
				<text class="name-l">小米10pro</text>
			</view>
			<view class="price">
				<view class="price-l">
					<text class="p1">¥ 26</text>
					<text class="p2">¥ 90</text>
				</view>
				<view class="price-r">
					<view class="color1">评分：9</view>
				</view>
			</view>
		</view>
		<!-- 评论 -->
		<view class="comment">
			<view class="comment-title">
				<view class="title-1">用户评论 (2)</view>
				<view class="title-r" @click="toComment">查看全部</view>
			</view>
			<view class="comment-cont">
				<view class="av">
					<view class="av-l">
						<image src="" mode=""></image>
						<text>de*</text>
					</view>
					<view class="av-r">2018-12-15 15:32</view>
				</view>
				<view class="grade">
					<view class="grade-l">规格：常规</view>
					<view class="grade-r">*****</view>
				</view>
				<view class="cont">
					这次这个洗衣液秒杀，秒到了很开心。
				</view>
			</view>
		</view>
		<view style="height: 200upx;"></view>
		<!-- 底部导航 -->
		<view class="bottom">
			<view class="button button1">
				<text>购物车</text>
			</view>
			<view class="button button2">
				<text @click="">加购物车</text>
			</view>
			<view class="button button3">
				<text @click="">立即购买</text>
			</view>
			<view class="share">
				<text>分享</text>
			</view>
		</view>
	</view>
</template>

<script>

	export default {
		data() {
			return {
				pictureList:[],
				indicatorDots: false,
				autoplay: false,
				interval: 5000,
				duration: 1000,
			};
		},
		onLoad: function (option) { 
		},
		methods: {
		},
	}
</script>

<style>
	body,page {
		background-color: #f3f3f3;
		overflow:hidden;
	}
	.detail {
		font-size: 26upx;
		width: 100%;
		min-height: 100%;
		position: absolute;
	}
	.banner {
		width: 100%;
		height: 800upx;
		background-color: #C0C0C0;
	}
	uni-swiper {
		height: 800upx;
	}
	swiper {
		height: 800upx;
	}
	.banner-img {
		width: 100%;
		height: 100%;
	}

	.pro-base {
		background-color: #fff;
		padding: 10upx 0;
	}
	.name {
		padding: 0 20upx;
		height: 60upx;
		line-height: 60upx;
	}

	.price {
		display: flex;
		padding: 0 20upx;
		height: 72upx;
		margin-bottom: 30upx;
	}

	.price .price-l {
		flex: 1;
		line-height: 72upx;
	}

	.price .p1 {
		font-size: 54upx;
		color: #333;
	}

	.price .p2 {
		font-size: 24upx;
		color: #333;
		text-decoration: line-through;
		margin-left: 10upx;
	}

	.comment {
		background-color: #fff;
		margin-top: 20upx;
		padding: 0 20upx;
	}
	.comment-title {
		line-height: 100upx;
		display: flex;
	}
	.comment-title .title-1 {
		flex: 1;
	}
	.comment-title .title-r {
		width: 150upx;
		text-align: right;
	}
	.comment .av {
		height: 80upx;
		line-height: 80upx;
		display: flex;
	}
	.comment .av-l {
		flex: 1;
		overflow: hidden;
	}
	
	.comment .av-l image {
		width: 55upx;
		height: 55upx;
		background-color: #A2A2A2;
		border-radius: 100%;
		vertical-align: center;
		float: left;
		margin-top: 12upx;
		margin-right: 20upx;
	}
	.comment  .av-r {
		width: 250upx;
		color: #999;
		text-align: right;
	}
	.comment .grade {
		height: 80upx;
		line-height: 80upx;
		display: flex;
	}
	.comment .grade-l {
		width: 150upx;
		color: #666;
		font-size: 22upx;
	}
	.comment .grade-r {
		color: #F52A4C;
		font-size: 26upx;
		flex: 1;
		text-align: right;
	}
	.comment .cont {
		min-height: 100upx;
		color: #666;
	}
	.content {
		margin-top: 20upx;
	}
	.bottom {
		width: 100%;
		height: 100upx;
		position: fixed;
		bottom: 50upx;
		color: #fff;
		padding: 0 20upx;
	}
	.bottom .button {
		height: 100upx;
		box-shadow: 0px 9px 8px 0px #CCCCCC;
		float: left;
		display: flex;
		line-height: 100upx;
		text-align: center;
		color: #B6B6B6;
		border-radius: 8upx;
		margin-right:15upx;
	}
	.bottom .button.button1 {
		width: 200upx;
		background-color: #4C4C4C;
	}
	.bottom .button.button2 {
		width: 130upx;
		background-color: #F8803E;
		color: #fff;
		display: flex;
    justify-content: center;
	}
	.bottom .button.button3 {
		width: 140upx;
		background-color: #F52A4C;
		color: #fff;
		display: flex;
		justify-content: center;
	}
	.bottom .button1 text {
		display: inline-block;
		width: 50%;
		height: 100upx;
	}
	.bottom .share {
		width:100upx;
		height:100upx;
		background-color: #4C4C4C;
		box-shadow:0px 9px 8px 0px #CCCCCC;
		border-radius: 100upx;
		float: right;
		line-height: 100upx;
		text-align: center;
	}
</style>
